<script setup>
import { ref, reactive, onMounted, h } from 'vue'


import TableCard from '@/components/TableCard/index.vue'

import { AddModel } from './components/index'
import { CaseModel, RecyclingModel, TreaModel, LawyerModel, } from '@/views/Arrears/components/index'

import { arrearsPageServer, } from '@/api/arrears'


const isAdd = ref(false)
const isCase = ref(false)
const isRecycling = ref(false)
const isTrea = ref(false)
const isLawyer = ref(false)

const currentCaseRow = ref(null) // 新增：用于存储当前案件文书数据

const ids = ref([]) // 新增：用于存储选中的ID


const from = reactive({
  // 分页
  page_num: 10,
  // 页码
  size: 1,
  // 搜索关键词
  keyword: '',
  // 公司ID
  company_id: 1,
  // 小区ID
  community_id: 1,
  // 用户ID
  user_id: 0,
})





// 表格头部搜索表单
const schema = [
  {
    component: 'Input',
    componentProps: {
      class: 'min-w-20',
      placeholder: '请输入姓名、电话或房间号',
    },
    fieldName: 'keywords',
  },
]


// 操作按钮
const dropdownBtn = reactive([
  {
    label: '案件文书',
    onClick: (row) => {
      isCase.value = true
      currentCaseRow.value = row
    }
  },
  {
    label: '生成起诉状',
    onClick: (row) => {
      isTrea.value = true
    }
  },

  {
    label: '撤回诉讼',
    onClick: (row) => {
      console.log('撤回诉讼')
    }
  },
  {
    label: '添加开通信息',
    onClick: (row) => {
      isAdd.value = true
      console.log('添加开通信息');
    }
  }, {
    label: '查看开庭记录',
    onClick: (row) => {
      console.log('查看开庭记录');

    }
  },
])

// 欠费数据模拟列表
const tableData = ref([
  {
    arrears_data_id: 10001, // 欠费数据ID
    company_id: 1, // 公司ID
    company_name: '北京xxx物业管理有限公司', // 公司名称
    community_id: 101, // 小区ID
    community_name: '智慧小区', // 小区名称
    user_id: 2001, // 用户ID
    user_name: '李四', // 用户名字
    name: '李四', // 名称/姓名 ---------- 目前跟案的使用这个
    mobile: '18888888888', // 手机号
    address: '2号楼1单元101', // 地址
    case_reason: '长期未缴物业费', // 案件原因
    start_datetime: '2024-01-01 00:00:00', // 开始时间
    end_datetime: '2024-12-31 23:59:59', // 结束时间
    last_start_datetime: '2024-03-01 00:00:00', // 剩余开始时间
    last_end_datetime: '2024-03-31 23:59:59', // 剩余结束时间
    amount: 302220.22, // 金额
    discount_amount: 1000.00, // 减免金额
    overdue_fine_amount: 30.00, // 滞纳金
    last_amount: 5000.00, // 剩余未支付金额
    has_pay_amount: 297220.22, // 已支付金额
    sms_count: 2, // 短信次数
    lawyer_count: 2, // 律师函次数
    is_litigation: false, // 是否诉讼
    close_method: '自动结案', // 关闭方式
    star_trace_record: [{ // 星标跟进记录（可选）
      id: 1,
      content: ' 星标跟进记录（可选）',
      add_user_name: '张三',
      add_time: '2024-03-04 22:33'
    }],
    trace_record_list: [ // 跟进记录列表（可选）
      {
        id: 1,
        content: '已联系业主，承诺下月缴清',
        add_user_name: '张三',
        add_time: '2024-03-04 22:33'
      },
      {
        id: 2,
        content: '已发送律师函',
        add_user_name: '王五',
        add_time: '2024-03-10 10:00'
      }
    ]
  }
])

// 回收
function handleRecycling(row) {
  isRecycling.value = true
  currentCaseRow.value = row
  console.log('回收', row)
}




// 获取欠费列表
async function getArrearsList() {
  const res = await arrearsPageServer(from)
  // tableData.value = res
}



onMounted(() => {
  getArrearsList()
})


</script>
<template>
  <div>
    <div class="shadow">
      <TableCard :fromSchema="schema" :tableData="tableData" id-key="arrears_data_id">

        <template #dropdown="{ row }">
          <div class="flex ">
            <el-button type="primary" size="small" text @click="handleRecycling(row)">回收</el-button>
            <el-button type="primary" size="small" text @click="handleRecycling(row)">结案</el-button>
            <el-dropdown trigger="click">
              <el-button type="primary" size="small" text>更多</el-button>
              <template #dropdown>

                <el-dropdown trigger="click">
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="(item, index) in dropdownBtn" :key="index" class="clearfix"
                      @click="item.onClick(row)">
                      {{ item.label }}
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-dropdown>
          </div>
        </template>
      </TableCard>

      <!-- 添加 -->
      <AddModel v-model="isAdd" />
      <!-- 案件文书 -->
      <CaseModel v-model="isCase" :row="currentCaseRow" />
      <!-- 回收 -->
      <RecyclingModel v-model="isRecycling" :row="currentCaseRow" />

      <!-- 生成起诉状     -->
      <TreaModel v-model="isTrea" :row="currentCaseRow" />
      <!--  生成律师函 -->
      <LawyerModel v-model="isLawyer" :row="ids" />
    </div>
  </div>
</template>

<style lang="scss" scoped></style>